﻿<template>
  <div class="git_Exchange_contain" ref="git_contain">
    <Header_other v-bind:header_name="header_name" ref="header"></Header_other>
    <div class="main_container"  ref="main_container">
      <!--<div class="main_container_header clearfix">
          <div class="main_container_header_act">通知</div>
          <div class="">背影寻人</div>
          <div class="">求助信息</div>
          <div class="">私信</div>
          <img src="../../static/img/nav_fenhao.png" class="wenhao_img">
      </div>-->
      <!-- scroll_wrap -->
      <div id="wrap_scroller">
        <scroller :on-refresh="refresh"
                  :on-infinite="infinite" class="clearfix" ref="myscroller">
          <!-- content goes here -->
          <div class="" ref="el" id="scroller">
            <!-- content goes here -->
            <!-- box -->
              <div class="Letter_box clearfix" v-for="info in menu_list" :key="info.id">
                  <div class="letter_box_header_wrap clearfix">
                    <!--<img src=
                         '{info.sendUser.image == null||info.sendUser.image == undefined?"../../static/img/bg_all.png?1":info.sendUser.image}'
                         class="letter_box_head">-->
                    <img v-bind:src="info.sendUser.image" class="letter_box_head">
                    <div class="leftter_box_right">
                      <div class="bz_nane">
                        {{info.sendUser.penName}}
                      </div>
                      <div class="letter_box_id">
                        ID:{{info.sendUser.ident}}
                      </div>
                    </div>
                    <div class="letter_box_right_btn">
                      <!--<div class="btn_base">加好友</div>
                      <div class="btn_base gz_btn">关注</div>
                      <div class="btn_base">回信</div>-->
                    </div>
                  </div>
                  <div class="Letter_box_letter">
                  {{info.content}}
                  </div>
              </div>
              
            <!-- box -->
            <!-- box -->
            <!--<div class="Letter_box clearfix">
              <div class="letter_box_header_wrap clearfix">
                <img src="../../static/img/bg_all.png" class="letter_box_head">
                <div class="leftter_box_right">
                  <div class="bz_nane">
                    李萍
                  </div>
                  <div class="letter_box_id">
                    ID:1018020
                  </div>
                </div>
                <div class="letter_box_right_btn">
                  <div class="btn_base">加好友</div>
                  <div class="btn_base gz_btn">关注</div>
                  <div class="btn_base">回信</div> 
                </div>
              </div>
              <div class="Letter_box_letter">
                Nice to meet you！
                披荆斩棘只为遇见你，用情地动你！
                随风而遇！浪漫有你！
              </div>
            </div>-->
            <!-- box -->
          </div>
        </scroller>
      </div>
      </div>
    </div>
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import Header_other from "./header_other/Header_other.vue";
  //limit_Scroll
  //import limit_scroll from "../../static/js/limit_scroll.js"
  var qs = require('qs');
  //axios.post('/foo', qs.stringify({ 'bar': 123 }));

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      show_layer:false,
      get_layer_show: this.$store.getters.get_layer_show,
      layer_show: false,
      header_name: "收件箱",
      layer_give_friend_data: false,
      give_other_data: false,
      this_box_msg: {},
      menu_list: [],
      pageNo: 1,
      pageSize: 10,
      first_flag:false
    }
  },
  ...mapActions([
    "thom_redirect",
  ]),
  ...mapMutations([
     "Change_certain_layer"
  ]),
  mounted: function () {
    let wish_header = window.getComputedStyle(this.$refs.header.$el, "height").height.replace("px", "");
    let main_h = document.body.clientHeight;

    this.$refs.main_container.style.height = main_h - parseInt(wish_header) + "px";
    //this.$refs.main_container.style.marginTop = parseInt(wish_header) + "px";
    //limit_scroll(this.$refs.el, this.$refs.git_contain);
    //qs.stringify({ 'rid': 2, "pageNo": 0, "pageSize": 6 }))
    let id = location.search.split("user_id=")[1];
    sessionStorage.setItem("user_id", id)
    this.$http.get('/yizhiweimen/api/user/sendInfo/getSendInfosByRid?rid=' + id +'&pageNo=1&pageSize=10')
      .catch( (thrown)=> {
        console.log(thrown)
      }).then( (e)=> {
        console.log(e.data)
        this.menu_list = e.data
      })
  },
  methods: {
    ...mapGetters([
      "get_ajax_base"
    ]),
    //上拉 获取数据
    get_data: function (resolve,reject) {
      this.$http.get('/yizhiweimen/api/user/sendInfo/getSendInfosByRid?rid=' + sessionStorage.getItem("user_id") + '&pageNo=' + this.pageNo + '&pageSize=' + this.pageSize)
        .catch((thrown) => {
          console.log(thrown)
          reject();
        }).then((e) => {
     
          resolve(e.data);
          
        })
    },
    //下拉
    refresh: function (done) {
      this.pageNo = 1;
      this.pageSize = 10;
      this.first_flag = false;

      this.$http.get('/yizhiweimen/api/user/sendInfo/getSendInfosByRid?rid=' + sessionStorage.getItem("user_id")+'&pageNo=1&pageSize=10')
        .catch((thrown) => {
          console.log(thrown)
        }).then((e) => {
          this.menu_list = e.data
          setTimeout(() =>{
            done();
          },400)
        })
    },
    //上啦
    infinite: function (done) {
      if (this.first_flag == false) {
        this.pageNo = 1;
      } else {
        this.pageNo += 1;
      }

      let myFirstPromise = new Promise((resolve, reject) => {
        this.get_data(resolve, reject);
      });

      myFirstPromise.then((successMessage) => {
        // console.log("promise___fuck_you_bitch");
        //successMessage的值是上面调用resolve(...)方法传入的值.
        //successMessage参数不一定非要是字符串类型，这里只是举个例子
        //如果 没有返回值就是 到底了 没有数据了 我日
        if (successMessage.length == 0 || successMessage == "" || successMessage == undefined || successMessage.length < 10) {
          done()
          this.$refs.myscroller.finishInfinite(2);
        } else {
          done()
          //this.$refs.myscroller.finishInfinite(2);
          for (let x = 0; x < successMessage.length; x++) {
            this.menu_list.push(successMessage[x])
          }
          this.menu_list.concat(successMessage)
        }
      })
        .catch(
        // Log the rejection reason
        (reason) => {
          console.log('Handle rejected promise (' + reason + ') here.');
        });

      if (this.first_flag == false) {
        this.first_flag = true;
      }
    },
    //弹出层
    layer_give_friend_f: function () {
      this.layer_give_friend_data = !this.layer_give_friend_data;
    },
    give_other: function () {
      this.give_other_data = !this.give_other_data
    },
    hide_detail_1: function () {
      this.layer_show = false;
    },
    //页面跳转
    goTo: function () {
      this.$store.dispatch("thom_redirect",{name:"/letter/SucLetter",router:this.$router});
    },
    open_certain_btn:function () {
        //show_layer 判断显示
      this.$store.dispatch("thom_redirect",
      {
          name:"/Index_main/Wrap_certain_layer/Certain_layer_input",router:this.$router
      });
    },
    goTo_letter_man:function() {
      this.$store.dispatch("thom_redirect",
        {
          name: "/Letter_man", router: this.$router
        });
    }
  },
  components: {
    Header_other
  }
}
</script>
<style>
  .header_other{
    position:fixed;
  }
</style>
<style scoped>
  .Letter_box_letter{
    text-align:center;
    color:#9f5c2f;
    font-size:0.7rem;
    background-color:#fff;
    padding:1.3rem 3.2rem;
    border-radius:2vw;
    width:61%;
    margin-bottom:1rem;
    box-shadow:2px 2px 4px 2px rgba(180, 180, 180, 0.62);
    margin-top:0.2rem;
  } 
  .letter_box_right_btn .gz_btn {
    color: #fff;
    background-color: #9f5c2f;
  } 
  .btn_base {
    float: left;
    padding: 0.2rem 0.5rem;
    font-size: 0.6rem;
    margin-top: 1.15rem;
    border: 2px solid #9f5c2f;
    color: #9f5c2f;
    border-radius: 1.2vw;
    margin-right: 0.1rem;
    text-align: center;
  } 
  .letter_box_right_btn {
    float: right;
  }
  .Letter_box {
    width: 90%;
    margin: 1rem auto 0;
  }
  .letter_box_id {
    font-size: 0.7rem;
    color: #9f5c2f;
    margin-left:0.2rem;
    margin-top:0.1rem;
  } 
  .leftter_box_right {
    float: left;
  } 
  .bz_nane {
    padding: 0.35rem 0.75rem;
    background-color: #9f5c2f;
    border-radius: 1vw;
    color: #fff;
    text-align: center;
    font-size: 0.6rem;
    margin-left: 0.2rem;
    width:50%;
    letter-spacing:1px;

  } 
  .letter_box_head {
    display: block;
    width: 2rem;
    height: 2rem;
    float: left;
    border-radius: 1vw;
  } 
  #wrap_scroller {
    //transform:translateY(20px);
    height: 100%;
  } 
  .box_bottom_wrap {
    margin-top: 0.3rem;
    padding-left: 5%;
    padding-right: 5%;
  } 
  .m_L_15 {
    margin-left: 2vw;
  } 
  .box_bottom_wrap .red_c {
    color: #e85454;
    border: 2px solid #e85454;
  }
  .box_base_btn {
    width: 20%;
    font-size: 0.7rem;
    height: 1.25rem;
    line-height: 2;
    border-radius: 2vw;
    border: 2px solid #9f5c2f;
    color: #9f5c2f;
  } 
  .box_list li {
    width: 48%;
  }
  .box_list {
    border-radius:2vw;
    background-color: #eeeeee;
    flex-wrap: wrap;
    font-size: 0.7rem;
    line-height: 2.45rem;
    width: 11.75rem;
    display: flex;
  } 
  .box_header_wrap {
    padding-left:1.4vw;
    padding-top:0.35rem;
    display: flex;
    justify-content: space-between;
  }
  .bor_bot {
    border-bottom: 1px solid #dfdfdf
  }
  .border_L {
    border-right: 1px solid #dfdfdf;
  }
  .box_img_s {
    display:block;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 2vw;
    border: 2px solid #e9c7ac;
  } 
  .box {
    height: 7.5rem;
    width: 93%;
    background-color: #fff;
    border-radius: 2vw;
    margin: 0.6rem auto;
    box-shadow: 0 2px 8px 2px rgba(180, 180, 180, 0.62);
  } 
  .wenhao_img {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    top: 50%;
    right: 2vw;
    transform: translateY(-50%);
  }
   .main_container {
      height:100%;
      background-color: #eeeeee;
  }
  .main_container_header {
    position:relative;
    height: 1.75rem;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    /*justify-content:space-between;*/
    font-size: 0.7rem;
    line-height: 2.6;
    color: #b4b4b4;
  }
  .main_container_header_act {
    color: #9f5c2f;
  }
  ._v-container{
    top:none;
    position:relative;
  }
  .git_Exchange_contain{
    height:100%;
  }
</style>